<template>
  <div class="info-item">
    <div class="title_box">
      <img src="~img/marketingExtension/title-icon.svg" />
      <p>{{ info.bankName }}</p>
    </div>
    <div class="zoufang-two" @click="checkDetail">
      <div class="zoufang-two-left">用户数量</div>
      <div class="zoufang-two-right">
        <div class="zoufang-two-one">{{ info.totalUser }}</div>
        <div class="zoufang-two-two">查看详情</div>
      </div>
    </div>
    <div class="zoufang-four-item">
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">已营销户数</div>
        <div class="zoufang-four-item-right">{{ info.marketingNum }}</div>
      </div>
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">陌生拜访</div>
        <div class="zoufang-four-item-right">{{ info.item1 }}</div>
      </div>
    </div>
    <div class="zuong-line"></div>
    <div class="zoufang-four-item">
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">日常维护</div>
        <div class="zoufang-four-item-right">{{ info.item2 }}</div>
      </div>
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">授信营销</div>
        <div class="zoufang-four-item-right">{{ info.item3 }}</div>
      </div>
    </div>
    <div class="zuong-line"></div>
    <div class="zoufang-four-item">
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">贷后维护</div>
        <div class="zoufang-four-item-right">{{ info.item4 }}</div>
      </div>
      <div class="zoufang-four-item-all">
        <div class="zoufang-four-item-left">其他事项</div>
        <div class="zoufang-four-item-right">{{ info.item5 }}</div>
      </div>
      <div class="zuong-line"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {};
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    checkDetail() {
      this.$emit("checkDetail", this.info);
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.info-item {
  .title_box {
    /* background: #eff6ff; */
    padding: 0 6px;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #2c2c2c;
    display: flex;
    align-items: center;
  }

  .title_box img {
    width: 8px;
    height: 16px;
    margin-right: 5px;
  }
  .zoufang-two {
    height: 33px;
    background: #f0f7ff;
    display: flex;
    align-items: center;
  }
  .zoufang-two-left {
    display: flex;
    align-items: center;
    padding-left: 14px;
    height: 33px;
    background: #e1eefe;
    width: 34%;
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #2c2c2c;
  }
  .zoufang-two-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
  }

  .zoufang-two-one {
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #989898;
  }

  .zoufang-two-two {
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #4b91e7;
  }

  .zoufang-three {
    height: 118px;
    display: flex;
  }

  .zoufang-three-item {
    width: 50%;
    display: flex;
    align-items: center;
  }

  .zoufang-three-item-left {
    width: 89px;
    height: 89px;
    margin-left: 20px;
    padding-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .zoufang-three-item-right {
    width: 74px;
    height: 89px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .zoufang-three-right1 {
    height: 28px;
    display: flex;
    align-items: center;
  }

  .oufang-three-right1-one {
    height: 28px;
    width: 4px;
    background: #7fb8fe;
    border-radius: 2px;
    margin-right: 6px;
  }

  .oufang-three-right1-two {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
  }

  .zoufang-three-right2 {
    height: 28px;
    display: flex;
    align-items: center;
  }

  .oufang-three-right2-one {
    height: 28px;
    width: 4px;
    background: #ffb18a;
    border-radius: 2px;
    margin-right: 6px;
  }

  .oufang-three-right2-two {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
  }

  .zoufang-four-item {
    height: 33px;
    /* background: #F0F7FF; */
    display: flex;
    align-items: center;
  }

  .zuong-line {
    height: 1px;
    background: #ececec;
  }

  .zuong-line1 {
    height: 7px;
    background: #ececec;
  }

  .zoufang-four-item-all {
    width: 50%;
    display: flex;
    align-items: center;
  }

  .zoufang-four-item-left {
    display: flex;
    align-items: center;
    width: 68%;
    padding-left: 14px;
    height: 33px;
    background: #f8f8f8;
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #2c2c2c;
  }

  .zoufang-four-item-right {
    flex: 1;
    padding-left: 13px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #989898;
  }
}
</style>
